<template>
  <div>
      <el-card class="tableCard">
      <el-form style="width:250px">
        <el-form-item label="属性名" label-width="60px">
          <el-input v-model.trim="editRowData.attrName" placeholder="请输入属性名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" :disabled="editRowData.attrName === ''" @click="handleAddAttr">添加属性值</el-button>
          <el-button @click="handleQuit">取消</el-button>
        </el-form-item>
      </el-form>
      <el-table border :data="editRowData.attrValueList">
        <el-table-column label="序号" width="80px" align="center">
          <template v-slot="{$index}">
            {{$index+1}}
          </template>
        </el-table-column>
        <el-table-column label="属性值名称" prop="valueName">
          <template v-slot="{row,$index}">
            <el-input :ref="$index" placeholder="请输入属性值" v-model.trim="row.valueName" v-if="row.flag" @blur="changeStatus(row,false)" @keydown.native.enter="changeStatus(row)"></el-input>
            <div v-else @click="changeStatus(row,true,$index)">{{row.valueName}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{row,$index}">
            <el-popconfirm :title="`您确定要删除${row.valueName}吗?`" @onConfirm="handleDel($index)">
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="btn">
        <el-button type="primary" :disabled="editRowData.attrValueList.length===0" @click="handleSave">保存</el-button>
        <el-button @click="handleQuit">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { saveAttrInfo } from "@/api/product/attr";
export default {
  props:{
    editRowData:{
      type:Object,
      default:()=>({})
    }
  },
  watch:{
    // 'editRowData.attrName':{
    //   handler(newValue){
    //     // console.log(newValue)
    //     if (newValue !== undefined) {
    //       this.attrDisabled = false
    //       this.saveDisabled = false
    //     }
    //   },
    //   immediate:true,
    //   deep:true
    // }
  },
  data(){
    return{
      // attrDisabled:true,
      // saveDisabled:true
    }
  },
  methods:{
    // 取消按钮
    handleQuit(){
      this.$emit('handleShowTable')
    },
    // 删除按钮
    // ***注意点 项目中使用的饿了么版本低,要使用@onConfirm 高版本使用@confirm
    handleDel(index){
      this.editRowData.attrValueList.splice(index,1)
    },
    // 添加属性
    handleAddAttr(){
        this.editRowData.attrValueList.push({
          attrId:this.editRowData.id,
          valueName:'',
          flag:true
        })
        this.$nextTick(()=>{
          this.$refs[this.editRowData.attrValueList.length-1].focus()
        })
    },
    // 切换状态 失去焦点 回车键
    changeStatus(row,bol,index=''){
      // 无值时候return
      if (!row.valueName){
        return 
      }
      // 判断是否重复方法1
      // const res = this.editRowData.attrValueList.filter(item=>{
      //   return item.valueName===row.valueName
      // })
      // if (res.length!==1) {
      //   this.$message.error('请不要输入重复的属性名')
      //   row.valueName = ''
      //   return
      // }
      // 判断是否重复方法2
      const res = this.editRowData.attrValueList.some(item=>{
        return item.valueName === row.valueName && item.flag !== row.flag
      })
      if (res) {
        this.$message.error('请不要输入重复的属性名')
        row.valueName = ''
        return
      }
      row.flag = bol
      // 点击的是div标签,切换成input标签时获取焦点
      // *** 注意点,数据更新到dom是异步的,代码执行的时候dom还未渲染,所以获取不到dom,需要使用$nextTick
      if (bol) {
        this.$nextTick(()=>{
          this.$refs[index].focus()
        })
      }
    },
    // 保存按钮
    async handleSave(){
      // 过滤数据 && 删除item.flag
      this.editRowData.attrValueList = this.editRowData.attrValueList.filter(item=>{
        return item.valueName !== '' && delete item.flag
      })
      try {
        await saveAttrInfo(this.editRowData)
        this.$message.success('保存成功')
        this.$emit('getData')
        this.handleQuit()
      } catch (error) {
        this.$message.error('因系统原因,保存失败')
      }
    }
  }
}
</script>

<style>
    .btn{
      margin-top: 20px;
    }
</style>